<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <TableFilter ref="actionBar" />
      <!-- <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
      </PageableTable> -->

      <AssetTable
        :columns="insideColumns"
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
        @open-drawer="onOpenDrawer"
        @close-filter-item="onCloseFilterItem"
      >
        <template v-for="column in insideColumns">
          <el-table-column v-if="column.display" :key="column.key" :label="column.title" :prop="column.key" :width="column.width" :sortable="column.sortable" :fixed="column.fixed">
            <template slot-scope="scope">
              <column-render :render="column.render" :row="scope.row" :column="column" />
            </template>
          </el-table-column>
        </template>
      </AssetTable>

    </div>
    <FormDialog class="fixed-dialog-height" title="编辑" :submit-display="true" confirm-text="保存" :show.sync="dialogFormVisible" width="90%" @on-submit="submit" @on-ok="ok" @on-cancel="cancel">
      <EditForm :id="editId" ref="editForm" />
    </FormDialog>
    <ViewDialog class="fixed-dialog-height" title="查看" :show.sync="dialogViewVisible" width="90%" @on-cancel="viewCancel">
      <ViewForm :id="editId" />
    </ViewDialog>
    <FormDialog
      ref="filterDialog"
      :drawer="true"
      width="40%"
      title="筛选"
      cancel-text="重置"
      confirm-text="筛选"
      :show.sync="drawerFormVisible"
      @on-ok="onSearch"
      @on-cancel="onReset"
    >
      <FilterForm ref="filterForm" :filter="filter" />
    </FormDialog>
  </div>
</template>

<script>
// secondary package based on el-pagination
import ViewDialog from '@neu/biz-core/components/ViewDialog'
import FormDialog from '@neu/biz-core/components/FormDialog'
// 表格查询组件独立编写，需要传递pageable-table实例的mixin方法filter
import TableFilter from './components/tableFilter'
import FilterForm from './components/filterForm'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
import EditForm from './components/editForm'
import ViewForm from './components/viewForm'
import databind from '@neu/biz-core/mixins/databind'
import { formatDate } from '@neu/biz-core/utils/utils'
import { page, claim } from '@neu/dcom-ui/api/inspectionTask'
import { list } from '@neu/dcom-ui/api/functional'
import AssetTable from '@neu/biz-core/components/AssetTable'

export default {
  name: 'InspectionTask',
  components: {
    TableFilter,
    FormDialog,
    FilterForm,
    EditForm,
    AssetTable,
    ViewDialog,
    ViewForm
    // SelectDialog
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  props: {
    forSelection: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      drawerFormVisible: false,
      r: page,
      // d: remove,
      inspectionTypes: [],
      /** 查看的**/
      dialogViewVisible: false,
      insideColumns: [
        { title: '任务名称', width: 200, key: 'name', display: true,
          render: (h, params) => { // 查看功能
            return h('span', [
              h('el-link', {
                class: 'font-12',
                attrs: { title: params.row.name },
                props: { type: 'primary' },
                on: { click: () => { this.view(params.row.id) } }},
              params.row.name)
            ])
          }
        },
        { title: '巡检类型', key: 'inspectionType', display: true,
          render: (h, params) => {
            const array = this.inspectionTypes.filter(t => {
              return t.id === Number(params.row.inspectionType)
            })
            let desc = params.row.inspectionType
            if (array && array.length > 0) {
              desc = array[0].name
            }
            return h('span', desc)
          }
        },
        { title: '领取人', key: 'claimName', display: true },
        { title: '执行人', key: 'username', display: true },
        { title: '任务状态', key: 'status', width: 130, sortable: 'custom', display: true, render: (h, params) => {
          let statusDesc = params.row.status
          const taskStatus = [
            { value: 'notStarted', text: '待巡检' },
            { value: 'inspecting', text: '巡检中' },
            { value: 'overtime', text: '超时未领取' }, // 超过结束时间未领取
            { value: 'overtimeUnfinished', text: '超时未完成' }, // 已领取，但是超过24小时还未填写结果
            { value: 'overtimeFinished', text: '超时完成' }, // 超过24小时，但是已经完成
            { value: 'finished', text: '已完成' }
          ]
          const array = taskStatus.filter(t => {
            return t.value === params.row.status
          })
          if (array && array.length > 0) {
            statusDesc = array[0].text
          }
          return h('span', [
            h('el-tag', statusDesc)
          ])
        }
        },
        { title: '计划开始时间', width: 140, key: 'startTaskTime', sortable: 'custom', render: (h, params) => { return h('span', formatDate(params.row.startTaskTime)) }, display: true },
        { title: '计划结束时间', width: 140, key: 'endTaskTime', sortable: 'custom', render: (h, params) => { return h('span', formatDate(params.row.endTaskTime)) }, display: true },
        { title: '领取任务时间', width: 140, key: 'getTaskTime', sortable: 'custom', render: (h, params) => { return h('span', formatDate(params.row.getTaskTime)) }, display: true },
        { title: '实际完成时间', width: 140, key: 'finishTaskTime', sortable: 'custom', render: (h, params) => { return h('span', formatDate(params.row.finishTaskTime)) }, display: true },

        { title: '异常巡检项数', key: 'alarm', sortable: 'custom', display: true,
          render: (h, params) => {
            let number = null
            if (params.row.alarm !== null && params.row.earlyWarning !== null) {
              number = params.row.alarm + params.row.earlyWarning
            } else {
              number = params.row.alarm === null ? params.row.earlyWarning === null ? null : params.row.earlyWarning : params.row.alarm
            }

            return h('span', number)
          }
        },
        { title: '正常巡检项数', key: 'normal', sortable: 'custom', display: true },
        { title: '未巡检项数', key: 'uninspected', sortable: 'custom', display: true }
      ],

      dialogFormVisible: false,

      dialogStatus: 'create',
      editId: -1
    }
  },
  created() {
    const obj = {
      's_statistics': 'true'
    }
    this.filter(obj)
  },
  mounted() {
    list().then(response => {
      this.inspectionTypes = response.data
    })
  },
  methods: {
    // 表格编辑按钮点击事件处理
    edit(id) {
      // 打开对话框
      this.editId = id
      this.dialogFormVisible = true
      // 更新当前被编辑实体的ID，自动传递至编辑表单
    },
    // 编辑资产对话框确认事件处理
    ok() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '保存成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogFormVisible = false
      })
    },
    cancel() {
      this.editId = -1
      this.$refs.editForm.reset()
      // 关闭对话框
      this.dialogFormVisible = false
    },
    submit() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.submit().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '提交成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogFormVisible = false
      })
    },
    claim(id) {
      claim(id).then(res => {
        if (res.status === 'success') {
          this.$message({
            showClose: true,
            message: '操作成功！',
            type: 'success'
          })
          this.refresh()
        } else {
          return this.$message({
            showClose: true,
            message: res.data,
            type: 'error'
          })
        }
      })
    },
    view(id) {
      this.editId = id
      this.dialogViewVisible = true
    },
    viewCancel() {
      this.editId = -1
      // 关闭对话框
      this.dialogViewVisible = false
    },
    onCloseFilterItem(item) {
      this.$refs.filterForm.onFilterItemClose(item)
    },
    onOpenDrawer() { // 筛选-打开抽屉
      this.drawerFormVisible = true
      this.$refs.actionBar.clearForm()
    },
    onSearch() { // 筛选-筛选
      this.$refs.filterForm.search()
      this.drawerFormVisible = false
    },
    onReset() { // 筛选-重置
      this.$refs.filterForm.reset()
      this.drawerFormVisible = false
    }
  }
}
</script>
